<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>


   

    <script>


        // 在页面上，事件处理函数越多，就越影响性能
        // 无法给未来的对象绑定事件 





        // 事件委托 --- 子元素的事件委托给父元素来做
        //   事件委托的原理 --- 基于事件冒泡


        setTimeout(function(){
            var oLi = document.createElement('li');
            oLi.innerHTML = '我是后来的' ;
            oUl.appendChild(oLi) ;
        },2000)


        // var oLis = document.querySelectorAll('li') ;
        // var oUl = document.querySelector('ul') ;

        // for(var i = 0 ; i < oLis.length ; i++) {
        //     oLis[i].onclick = function() {
        //         console.log(this);
        //     }
        // }


        var oLis = document.querySelectorAll('li') ;
        var oUl = document.querySelector('ul') ;


        oUl.addEventListener('click' , function(e) {
            console.log(66);
            console.log(e.target) ;
        })



       



    </script>
    
</body>
</html>